<template>
    <div>
        <!--眉头-->
        <button-tab v-model="demo01">
            <button-tab-item @on-item-click="push()">存酒</button-tab-item>
            <button-tab-item @on-item-click="pull()">取酒扫码</button-tab-item>
        </button-tab>
        <divider></divider>
        <!--操作-->
        <group v-if="status == 1">
            <button-tab v-model="demo02">
                <button-tab-item @on-item-click="save()">保存</button-tab-item>
                <button-tab-item @on-item-click="reset()">重置</button-tab-item>
            </button-tab>
            <!--明细-->
            <div>
                <flexbox>
                    <flexbox-item :span="1/9">
                    </flexbox-item>
                    <flexbox-item :span="3/9">
                        <div>酒名</div>
                    </flexbox-item>
                    <flexbox-item :span="3/9">
                        <div>数量</div>
                    </flexbox-item>
                    <flexbox-item :span="1/9">
                        <x-button type="primary" plain style="border-radius:10px;" @click.native="newList">＋</x-button>
                    </flexbox-item>
                    <flexbox-item :span="1/9">
                    </flexbox-item>
                </flexbox>
            </div>
            <div>
                <flexbox v-for="wine in wineList">
                    <flexbox-item :span="4/9">
                        <x-input placeholder="输入酒名" v-model="wine.name"></x-input>
                    </flexbox-item>
                    <flexbox-item :span="4/9">
                        <x-number :min="0" :step="0.1" v-model="wine.num" fillable></x-number>
                    </flexbox-item>
                    <flexbox-item :span="1/9">
                    </flexbox-item>
                </flexbox>
            </div>
            <x-input title="手机号" placeholder="请输入手机号" v-model="phone"></x-input>
            <x-input title="备注" placeholder="" v-model="tag"></x-input>
            <!--<datetime v-model="end_time" @on-change="change" title="截止日期"></datetime>-->
            <datetime v-model="end_time" title="截止日期"></datetime>
        </group>
        <divider></divider>
        <group v-if="status == 2">
        </group>
        <group v-if="status >= 3">
            <x-button type="primary" style="width:90%" @click.native="scan">扫码</x-button>
        </group>
        <group v-if="status == 4">
            <!--<div v-for="wine in wineGet">{{wine.name}} * {{wine.num}} </div>-->
            <div>存酒信息{{getWineInfo}}</div>
            <x-button @click.native="pullDo">取酒处理</x-button>
        </group>

        <div v-transfer-dom >
            <x-dialog style="position:relative;top:-100px;" v-model="show" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
                <p style="color:#fff;text-align:center;" @click="show = false">
                
                <qrcode :value="qrcode" type="img" style="max-width:100%"></qrcode>
                <br>
                <br>
                <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
                </p>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    import {Datetime,XDialog,Alert,Flexbox,FlexboxItem,XButton,Cell,ButtonTab, ButtonTabItem,Divider,XInput,XNumber,Group,Qrcode,TransferDomDirective as TransferDom} from 'vux'

    import status from '../../api/status.js'
    import user from '../../api/user.js'
    import dateformat from 'dateformat'

    export default {
        directives: {
            TransferDom
        },
        components:{
            Datetime,
            XDialog,
            Alert,
            Flexbox,
            FlexboxItem,
            Cell,
            XButton,
            ButtonTab,
            ButtonTabItem,
            Divider,
            XInput,
            XNumber,
            Group,
            Qrcode
        },
        data(){
            return {
                end_time:'2017-11-01',
                tag:'',
                phone:'',
                demo01:0,
                demo02:0,
                roundValue:0,
                status:0,
                wineList:[],
                wineGet:[],
                wine_name:'',
                show: false,
                qrcode:'',
                ticketArr:[],
                pull_id:0,
                getWineInfo:''
            }
        },
        methods:{
            // 第一步－初始化
            push(){
                this.status = 1
            },
            // 第二部－新增
            newList(){
                if(this.wineList.length == 0){
                    this.wineList.push({name:'',num:1})
                }
                if(this.wineList[this.wineList.length - 1].name == undefined){
                    console.log('名不能未定义')
                    return
                }
                if(this.wineList[this.wineList.length - 1].name == ''){
                    console.log('名不能为空')
                    return
                }
                if(this.wineList[this.wineList.length - 1].num == undefined){
                    console.log('数量不能为定义')
                    return
                }
                if(this.wineList[this.wineList.length - 1].num == 0){
                    console.log('数量不能空')
                    return
                }
                this.wineList.push({name:'',num:0})
            },
            // 第三部－保存－待扫
            save(){
                if(this.wineList.length == 0 || this.wineList[0].name == '' || this.wineList[0].num == '' ){
                    this.showPlugin()
                }else{
                    let _wine_info = {
                        user_info:{oper:user.userinfo.openid,nick:user.userinfo.nick,mch_id:user.userinfo.mch_id,phone:this.phone,tag:this.tag,end_time:this.end_time},
                        wine_list:this.wineList
                    }
                    this.$axios.post('/wine/save',_wine_info)
                    .then((ret)=>{
                        console.log(ret.data.wine_id)
                        this.qrcode = "/wine/update?wine_id=" + ret.data.wine_id
                        this.show = true
                        this.status = 2
                        var _ = this

                        var tag_id = ret.data.wine_id

                        user.socket.emit("wine_subscribe",{
                            mch_id:user.userinfo.mch_id,
                            openid:user.userinfo.openid,
                            tag:tag_id
                        })

                        user.socket.on('wine_notify',function(data){
                            _.show = false
                            _.$vux.alert.show({
                                title: '提示',
                                content: data
                            })
                            // user.socket.emit('cancelSubscribe',{tag:tag_id})
                        })

                    })
                }
            },
            // step 1=>显示扫码枪
            pull(){
                this.status = 3
            },
            // step 2 ＝》扫描后显示结果
            scan(){
                var _ = this
                wx.scanQRCode({
                needResult: 1,
                desc: '描述/wine/getbyid?wine_id=111',
                success: function (res) {
                    // JSON.stringify(res);
                    _.pull_id = res.resultStr.split("=")[1]
                    _.$axios.get(res.resultStr)
                    .then((ret)=>{
                        _.getWineInfo = ret.data.wine_list
                            // console.log(winArr)
                            // var tmpArr = []
                            // var tmpObj
                            // winArr.split(',').forEach((item,index)=>{
                            //     if(index % 2 == 0){
                            //         tmpObj = {}
                            //         tmpObj["name"] = item
                            //         tmpArr.push(tmpObj)
                            //     }else{
                            //         tmpObj["num"] = item
                            //     }
                            // })
                            // _.wineGet = tmpArr
                        _.status = 4
                    })
                }
                });
            },
            // step 3 ＝》根据结果处理－后回到扫码枪
            pullDo(){
                var _ = this
                this.$axios.get("/wine/do?wine_id="+this.pull_id)
                .then((ret)=>{
                    // 通知用户
                    var tag_id = this.pull_id
                    if(ret.data.info == "success"){
                        user.socket.emit("notify",{tag:tag_id},"取酒完成")
                        _.status = 3
                    }
                })
            },
            reset(){
            },
        },
        mounted(){
            this.value1 = dateformat(new Date(),'yyyy-mm-dd')
        }
            // wx.config({
            //     debug: false,
            //     appId: 'wx4fe135a46ae46e63',
            //     timestamp: 1507448301,
            //     nonceStr: 'A2GPKTyesx56LBR3',
            //     signature: '7aa56f1438603913c8cf4d5d7049add2e8ab7b37',
            //     jsApiList: [
            //         'checkJsApi',
            //         'onMenuShareTimeline',
            //         'onMenuShareAppMessage',
            //         'onMenuShareQQ',
            //         'onMenuShareWeibo',
            //         'onMenuShareQZone',
            //         'hideMenuItems',
            //         'showMenuItems',
            //         'hideAllNonBaseMenuItem',
            //         'showAllNonBaseMenuItem',
            //         'translateVoice',
            //         'startRecord',
            //         'stopRecord',
            //         'onVoiceRecordEnd',
            //         'playVoice',
            //         'onVoicePlayEnd',
            //         'pauseVoice',
            //         'stopVoice',
            //         'uploadVoice',
            //         'downloadVoice',
            //         'chooseImage',
            //         'previewImage',
            //         'uploadImage',
            //         'downloadImage',
            //         'getNetworkType',
            //         'openLocation',
            //         'getLocation',
            //         'hideOptionMenu',
            //         'showOptionMenu',
            //         'closeWindow',
            //         'scanQRCode',
            //         'chooseWXPay',
            //         'openProductSpecificView',
            //         'addCard',
            //         'chooseCard',
            //         'openCard'
            //     ]
            // });
        }
</script>